<!--
 * @Date: 2022-07-04 09:54:33
 * @LastEditTime: 2022-07-12 09:52:13
-->
<template>
  <div id="lg-panel-main-rg">
    <el-form :model="registerForm" ref="registerForm" :rules="register_rules" class="rg-form-main">
      <el-form-item prop="username" class="rg-form-item">
        <el-input v-model="registerForm.username" show-word-limit placeholder="用户名" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item prop="password" class="rg-form-item">
        <el-input v-model="registerForm.password" show-word-limit maxlength="32" type="password" placeholder="密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="password_confirm" class="rg-form-item">
        <el-input v-model="registerForm.password_confirm" maxlength="32" type="password" placeholder="请再次输入密码" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item prop="nickname" class="rg-form-item">
        <el-input v-model="registerForm.nickname" show-word-limit maxlength="20" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item prop="sex" class="rg-form-item">
        <el-radio-group v-model="registerForm.sex">
          <el-radio-button label="0">男</el-radio-button>
          <el-radio-button label="1">女</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="birth" class="rg-form-item">
        <el-date-picker
          v-model="registerForm.birth"
          type="date"
          placeholder="出生日期">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item class="rg-form-item">
        <el-button @click="register" type="primary" id="rg-form-btn" @keydown.enter="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from '@/api/user'
export default {
  name: 'RegisterPanel',
  data () {
    const validatePasswd = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: null,
        password: '',
        // nickname: '',
        password_confirm: ''
        // sex: null,
        // birth: null
      },
      register_rules: {
        username: [{required: true, message: '用户名不可为空', trigger: 'blur'}, {min: 3, max: 20, message: '用户名不得少于3字符，多于20字符', trigger: 'blur'}],
        password: [{required: true, message: '密码不可为空', trigger: 'blur'}, {min: 6, max: 32, message: '密码不得少于6个字符，多于32个字符', trigger: 'blur'}],
        // nickname: [{required: true, message: '昵称不可为空', trigger: 'blur'}, {min: 1, max: 20, message: '昵称不能为空或者多于20个字符', trigger: 'blur'}],
        password_confirm: [
          // {required: true, message: '不可为空', trigger: 'blur'}
          {validator: validatePasswd, trigger: 'blur'}
        ]
        // sex: [{required: true, message: '请选择性别', trigger: 'change'}],
        // birth: [{type: 'date', required: true, message: '请选择出生日期', trigger: 'change'}]
      }
    }
  },
  methods: {
    submit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          return true
        } else {
          return false
        }
      })
    },
    register: function () {
      if (!this.submit('registerForm')) return
      register(this.registerForm)
        .then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: '注册成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
      console.log(this.registerForm)
    }
  }
}
</script>

<style>
#lg-panel-main-rg {
  width: calc(100% - 20px);
  height: calc(100% - 110px);
  padding: 100px 10px 10px 10px;
}
.rg-form-item {
  width: 80%;
}
.rg-form-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#rg-form-btn {
  width: 100%;
}
</style>
